<template>
  <div class="home-wrap">
    <el-row>
      <el-col :span="12">
        <section class="myChart" ref="myChart"></section>
      </el-col>
      <el-col :span="12">
        <el-card :loading="loading" shadow="hover">
          <div slot="header" class="clearfix">
            <span>热搜榜</span>
          </div>
          <el-scrollbar style="height: 100%;">
            <hot-card :list="hotList" />
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12"></el-col>
      <el-col :span="12"></el-col>
    </el-row>
  </div>
</template>

<script>
import HotCard from '@/components/HotCard.vue'
import { HttpGet, HttpPost, getHotData } from '@/api/http'
export default {
  name: "Home",
  components: {
    HotCard
  },
  data() {
    return {
      loading: false,
      total: [],
      hotList: [],
      routePath: ['/user', '/goods', '/courier', '/car', '/swiper', '/task']
    };
  },
  async mounted() {
    this.getHot()
    await this.getTotal()
    this.drawChart()
    window.addEventListener("resize", this.resizeEcharts);
  },
  methods: {
    resizeEcharts() {
      for (let k = 0; k < this.echartsObjList.length; k++) {
        this.echartsObjList[k].resize()
      }
    },
    drawChart() {
      let myChart = this.$echarts.init(this.$refs.myChart)
      myChart.setOption({
        title: {
          text: '赏金猎人后台数据分析',
          textStyle: {
            color: '#fff'
          },
          left: 'center',
          color: '#fff'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '赏金猎人',
            type: 'pie',
            height: 'auto',
            radius: '50%',
            data: this.total,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      myChart.on('click', this.clickFunc)
    },
    clickFunc(params) {
      if (params.componentType == "series") {
        this._router(params.dataIndex)
      }
    },
    _router(index) {
      this.$router.push(`/main${this.routePath[index]}`)
    },
    async getTotal() {
      try {
        const res = await HttpGet({ url: '/total' })
        if (res.code == 200) {
          this.total = res.data.map(item => {
            return {
              name: item.label,
              value: item.value
            }
          })
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getHot() {
      try {
        this.loading = true
        const res = await getHotData()
        if (res.code == 200) {
          this.hotList = res.result.list.map(item => {
            return {
              title: item.title,
              disc: item.digest
            }
          })
        }
      } finally {
        this.loading = false
      }
    }
  },
  activated() {
    this.resizeEcharts()
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeEcharts);
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home-wrap {
  height: 100%;

}

.el-row {
  height: 50%;
}

.el-row .el-col {
  height: 100%;
}

.myChart {
  /* border: 1px solid #000; */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 50px;
}

.el-card {
  height: 100%;
  border: 0 solid #000;
  background: none;

}

>>>.el-card__header {
  border: 0 solid #000;
  color: rgb(111, 202, 241);
}

>>>.el-card__body {
  height: calc(100% - 60px);
  padding: 0;
}

>>>.el-scrollbar__wrap {
  height: 105%;
}


</style>
